<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :show-close="false"
    width="90%"
    @close="close"
  >
    <template #title>
      <div style="display: flex; justify-content: space-between">
        <div style="font-size: 16px">
          专家团队管理
          <B style="color: #a3a6ad"><vab-icon icon="arrow-right-s-line" /></B>
          专家{{ title }}
        </div>
        <vab-icon
          icon="close-circle-line"
          style="
            font-size: 24px;
            cursor: pointer;
            color: crimson;
            margin-top: -5px;
          "
          @click="close"
        />
      </div>
    </template>

    <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="22">
          <el-form-item label="专家姓名" prop="name">
            <el-input v-model.trim="form.name" :placeholder="''" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 标签 -->
      <el-row>
        <el-col :span="22">
          <el-form-item label="标签" prop="label">
            <el-input v-model.trim="form.label" :placeholder="''" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 头像 -->
      <el-row>
        <el-col :span="22">
          <el-form-item label="头像" prop="avatarId">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
              "
            >
              <el-image
                v-if="form.avatarUrl"
                :preview-src-list="[form.avatarUrl]"
                :src="form.avatarUrl"
                style="height: 60px; width: 60px"
              />
              <el-button
                style="
                  background-color: #58b5e1;
                  color: #fff;
                  border: 0px;
                  font-size: 14px;
                  margin-left: 40px;
                "
                @click="toClickUpLoad"
              >
                上传头像
              </el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 富文本编辑器 -->
      <el-row>
        <el-col :span="22">
          <el-form-item label="艺人简介">
            <quill-editor
              ref="quillEditor"
              v-model:content="form.introduction"
              content-type="html"
              :options="myOptions"
              style="width: 100%; height: 250px"
              @update:content="updateQuill"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button style="font-size: 16px" @click="close">取 消</el-button>
      <el-button
        style="
          background-color: #0d66b2;
          color: #fff;
          border: 0px;
          font-size: 14px;
        "
        @click="save"
      >
        {{ title == '添加' ? '添加' : '保存' }}
      </el-button>
    </template>

    <el-upload
      accept=".jpg,.jpeg,.png"
      :action="baseURL + 'public/upload'"
      class="main_img_upload"
      :headers="headers"
      :on-success="handleSuccess"
      :show-file-list="false"
    />
  </el-dialog>
</template>

<script>
  import {
    defineComponent,
    getCurrentInstance,
    reactive,
    toRefs,
    computed,
  } from 'vue'
  import { useStore } from 'vuex'
  import { doEdit } from '@/api/expert'
  import { baseURL } from '@/config/net.config'
  import { QuillEditor } from '@vueup/vue-quill'
  import '@vueup/vue-quill/dist/vue-quill.snow.css'

  export default defineComponent({
    name: 'TableEdit',
    components: {
      QuillEditor,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance()
      const store = useStore()

      const state = reactive({
        formRef: null,
        quillEditor: null,
        title: null,
        specialList: [],
        form: {},
        rules: {
          name: [
            { required: true, trigger: 'blur', message: '请输入专家姓名' },
          ],
        },
        dialogFormVisible: false,
        baseURL: baseURL,
        headers: {
          Authorization: computed(() => store.getters['user/token']),
        },
        myOptions: {
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'code-block'],
              [{ header: 1 }, { header: 2 }],
              [{ size: ['small', false, 'large', 'huge'] }, { align: [] }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['link', 'image', 'video'],
              [{ direction: 'rtl' }],
              [{ color: [] }, { background: [] }],
              ['clean'],
            ],
          },
          placeholder: '请输入内容...',
        },
        content: '<p>12312</p>', // 这里定义 content
      })

      const showEdit = async (row) => {
        if (!row.id) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }

      const updateQuill = (newContent) => {
        state.introduction = newContent // 更新 content
      }

      const close = () => {
        state.formRef.resetFields()
        state.form = {}
        state.dialogFormVisible = false
        if (state.quillEditor) {
          state.quillEditor.setContents([]) // 通过 Quill 的 API 清空编辑器内容
        }
      }

      const save = () => {
        state.formRef.validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      const toClickUpLoad = () => {
        document.querySelector('.main_img_upload input').click()
      }

      const handleSuccess = async (res) => {
        if (res.stat === 200) {
          state.form.avatarUrl = res.url
          state.form.avatarId = res.resourceId
        } else {
          proxy.$baseMessage(res.msg, 'error', 'vab-hey-message-error')
        }
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        toClickUpLoad,
        handleSuccess,
        updateQuill,
      }
    },
  })
</script>
